<!-- 2023年11月2日 -->
<!-- @刘洪材 -->
<!-- 足球掉落动画+满足自由落体公式 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>足球掉落动画</title>
	<style>
        
        * {
            -webkit-user-drag: none; /* 禁止Webkit浏览器上的图片拖拽功能 */
            -moz-user-select: none; /* 禁止Firefox浏览器上图片的鼠标选中效果 */
            -ms-user-select: none; /* 禁止IE浏览器上图片的鼠标选中效果 */
            user-select: none; /* 禁止所有浏览器上图片的鼠标选中效果 */
            -webkit-tap-highlight-color: transparent;
        }
        html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#container {
			position: relative;
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}
		.football {
			position: absolute;
			width: 50px;
			height: 50px;
			/* background-image: url("zhuqiu.png"); */
			background-size: contain;
			background-repeat: no-repeat;
		}
        .window {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: center;
            align-items: stretch;
            height: 120px;
            z-index: 11;
            position: relative;
            width: 150px;
            /* min-height: 60px; */
            padding: 60px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(3px);

            gap: 25px;
            box-shadow: 0 0px 50px rgba(0, 0, 0, 0.2)
        }
        h3{
            margin: 0;
        }
        p{
            z-index: 12;
            position: relative;
            top: 90%;
            color: #555555ed;
            position: fixed;
            bottom: 5%;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
        }
	</style>
</head>
<body>
	<div id="container" onclick="addFootball(event)">  

        <div class="window" id="myWindow">
            <h3>跌落物图片选择器</h3>
            <img src="./zhuqiu.png" style="height: 60px;" onclick="changeFootballImage(this, true)">
            <img src="./lanqiu.png" style="height: 60px;" onclick="changeFootballImage(this, true)">
            <img src="./flower.png" style="height: 60px;" onclick="changeFootballImage(this, false)">
            <img src="./4.png" style="height: 60px;" onclick="changeFootballImage(this, false)">
        </div>
        <p id="clickMe">@2023年10月17日 刘洪材的网页</p>
    </div>


	<script>
		var currentFootballImage = "./zhuqiu.png"; // 当前掉落物的图片路径
		var currentFootballRotation = false; // 当前掉落物是否需要旋转的标识
	
		function addFootball(event) {
			var x = event.clientX;
			var y = event.clientY;
	
			var football = document.createElement("div");
			football.className = "football";
			football.style.left = x + "px";
			football.style.top = y + "px";
			football.style.backgroundImage = "url(" + currentFootballImage + ")"; // 设置掉落物的图片
	
			if (currentFootballRotation) {
				football.dataset.rotation = "true"; // 设置掉落物是否需要旋转的数据属性
			} else {
				football.dataset.rotation = "false";
			}
	
			document.getElementById("container").appendChild(football);
	
			var start = null;
			var end = document.getElementById("container").clientHeight;
			var duration = 2000;
			var y0 = y;
			var v0 = 0;
			var g = 9.8;
			var rotationDirection = Math.random() < 0.5 ? -1 : 1;
			var rotationSpeed = Math.random() * 360; // 随机生成0到360之间的旋转速度
	
			function animate(timestamp) {
				if (!start) start = timestamp;
				var progress = timestamp - start;
				// 这行代码用于计算足球元素在垂直方向上的位移距离，即足球元素从起始位置到当前位置所经过的距离
				var distance = v0 * progress / 1000 + g * progress * progress / 200000;
				var y = y0 + distance;
	
				if (y < end) {
					football.style.top = y + "px";
					if (football.dataset.rotation === "true") {
						football.style.transform = "rotate(" + progress / 10 + "deg)"; // 根据数据属性设置旋转角度
					}
					requestAnimationFrame(animate);
				} else {
					football.parentNode.removeChild(football);
				}
			}
	
			requestAnimationFrame(animate);
		}
		
		document.addEventListener("mousemove", function(event) {
	setTimeout(function() {
		addFootball(event);
	}, 10); // 延迟1秒钟调用addFootball函数
});
		function changeFootballImage(img, rotation) {
			currentFootballImage = img.src; // 切换掉落物的图片路径
			currentFootballRotation = rotation; // 标记掉落物是否需要旋转
		}
	</script>

<script src="./yidong.js"></script>
</body>
</html>